<template>
    <div>

        <div class="filter-container">
           <el-input
                @keyup.enter.native="loadData"
                style="width: 200px;"
                size="small"
                clearable
                class="filter-item"
                placeholder="被分享人会员卡号"
                v-model="queryParams.userVirtualcard"
            ></el-input>
            <el-input
                @keyup.enter.native="loadData"
                style="width: 200px;"
                size="small"
                clearable
                class="filter-item"
                placeholder="被分享人手机号"
                v-model="queryParams.userTelephone"
            ></el-input>
            <el-button
                class="filter-item"
                type="primary"
                size="small"
                v-waves
                icon="el-icon-search"
                @click="loadData"
            >搜索</el-button>
        </div>

        <el-table
            :data="dataList"
            v-loading="listLoading"
            element-loading-text="给我一点时间"
            border=""
            fit
            highlight-current-row
            style="width: 100%"
        >
            <el-table-column align="center" prop="sharerVirtualcard" label="分享人会员卡号" width="160"></el-table-column>
            <el-table-column align="center" prop="sharerTelephone" label="分享人手机号" width="160"></el-table-column>
            <el-table-column align="center" prop="userVirtualcard" label="被分享人会员卡号" width="160"></el-table-column>
            <el-table-column align="center" prop="userTelephone" label="被分享人手机号" width="160"></el-table-column>
            <el-table-column align="center" prop="createTime" label="分享时间" width="160"></el-table-column>
            <el-table-column align="center" prop="status" label="状态" width="160">
                <template slot-scope="scope">
                    <div>{{scope.row.status|statusFilter}}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="modifyTime" label="成功下单时间" width="160">
                <template slot-scope="scope">
                    <div v-if="scope.row.status == 1">
                        {{scope.row.modifyTime}}
                    </div>
                </template>
            </el-table-column>
        </el-table>
         <div class="pagination-container">
            <el-pagination
                background=""
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="queryParams.pageNo"
                :page-sizes="[10,20,30,50]"
                :page-size="queryParams.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="dataTotal"
            ></el-pagination>
        </div>
    </div>
</template>
<script>
const statusOptions = [
  '待下单',
  '已下单'
]
export default {
  name: 'recommend-detail',
  data () {
    return {
      listLoading: false,
      dataList: [],
      dataTotal: 0,
      queryParams: {
        pageNo: 1,
        pageSize: 10
      }
    }
  },
  created () {
    this.loadData()
  },
  watch: {
    virtualcard () {
      this.queryParams.pageNo = 1
      this.loadData()
    }
  },
  methods: {
    loadData () {
      this.listLoading = true
      this.queryParams.sharerVirtualcard = this.virtualcard
      this.queryParams.usedStartTime = this.startTime
      this.queryParams.status = 1
      this.queryParams.usedEndTime = this.endTime
      this.$get('/admin/share_activity_user_log/list', this.queryParams)
        .then(data => {
          this.dataList = data.rows || []
          this.dataTotal = data.total
        })
        .finally(() => {
          this.listLoading = false
        })
    }
  },
  filters: {
    statusFilter (v) {
      return statusOptions[v]
    }
  },
  props: {
    startTime: {
      type: String,
      default: ''
    },
    endTime: {
      type: String,
      default: ''
    },
    virtualcard: {
      type: String,
      default: ''
    }
  }
}
</script>
